<template>
  <div class="classifylist">
    <div class="nav">
      <van-nav-bar
        left-text="返回"
        :title="title"
        left-arrow
        @click-left="back"
      >
      </van-nav-bar>
    </div>
    <div class="classifylist-content">
      <div
        class="classifylist-content-list"
        :class="item.type"
        v-for="(item, i) in categories"
        :key="i"
      >
        <div
          class="item"
          :class="index == 0 ? 'active' : 'item'"
          v-for="(items, index) in item.catArray"
          :key="index"
          @click="getCondition(item.type, index, $event)"
        >
          {{ items.name }}
        </div>
      </div>
    </div>
    <div class="classifylist-book">
      <div class="classifylist-book-list">
        <div
          class="classifylist-book-list-item"
          v-for="(item, i) in list"
          :key="i"
          @click="getId(item.id)"
        >
          <div class="classifylist-book-list-item-img">
            <img :src="item.cover" alt="" @error="handleError($event)" />
          </div>
          {{ item.title }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "classifylist",
  data() {
    return {
      title: "",
      categories: [],
      list: [],
      catId: 0,
      pay: 0,
      bookStatus: 0,
      sort: 0,
      wordCount: 0,
      img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Fc823bc165add16c76bdefaee090c45c202267a452deaa-lLhkHf_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650685371&t=e67779564f0416a69ca07519acf1045b",
    };
  },
  created() {
    this.catid = this.$route.params.catid;
    this.getCatid(this.catid);

    let a = this.catid.split(/\=/);
    this.catId = a[1];
  },
  methods: {
    getCatid(catid) {
      //发起申请
      this.axios({
        //请求类型
        method: "get",
        //请求路径
        url: "https://apis.netstart.cn/yunyuedu" + catid,
      })
        .then((result) => {
          // console.log("result==>", result);
          this.title = result.data.title;
          this.categories = result.data.categories;
          this.creatbook(0, 0, 0, 0);
        })
        .catch((err) => {
          console.log("err ==> ", err);
          this.$router.go(-1);
        });
    },
    //点击切换条件
    getCondition(condition, index, event) {
      // console.log("condition==>", condition);
      // console.log("index==>", index);
      // console.log("event==>", event);
      let active = document.querySelectorAll(`.${condition}>.item`);
      active.forEach((v) => {
        v.classList.remove("active");
      });
      event.srcElement.classList.add("active");
      if (condition == "pay") {
        let pay = index;
        this.pay = pay;
      }
      if (condition == "bookStatus") {
        let bookStatus = index;
        this.bookStatus = bookStatus;
      }
      if (condition == "sort") {
        let sort = index;
        this.sort = sort;
      }
      if (condition == "wordCount") {
        let wordCount = index;
        this.wordCount = wordCount;
      }
      this.creatbook(this.pay, this.bookStatus, this.sort, this.wordCount);
    },
    //生成书籍列表
    creatbook(pay, bookStatus, sort, wordCount) {
      //发起申请
      this.axios({
        //请求类型
        method: "get",
        //请求路径
        url: "https://apis.netstart.cn/yunyuedu/source/v2/searchBook.json",
        params: {
          catId: this.catId,
          pay,
          bookStatus,
          sort,
          wordCount,
        },
      })
        .then((result) => {
          // console.log("result==>", result);
          this.list = result.data.list;
        })
        .catch((err) => {
          console.log("err ==> ", err);
        });
    },
    //传递书籍的id
    getId(pid) {
      // console.log("pid ==> ", pid);
      this.$router.push({ name: "noveldetail", params: { pid } });
    },
    //返回上一级
    back() {
      this.$router.go(-1);
    },
    //没有图片的话用默认图片
    handleError(e) {
      e.currentTarget.src = this.img;
    },
  },
};
</script>

<style lang="less" scoped>
.classifylist {
  width: 100%;
  height: 100%;
  .classifylist-content {
    width: 100%;
    padding-left: 15px;
    margin-top: 15px;
    font-size: 15px;
    .classifylist-content-list {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 10px;
      .item {
        margin-right: 10px;
      }
      .active {
        color: red;
      }
    }
  }
  .classifylist-book {
    width: 100%;
    .classifylist-book-list {
      display: flex;
      flex-wrap: wrap;
      padding-left: 15px;
      font-size: 15px;

      .classifylist-book-list-item {
        width: calc(33% - 10px);
        margin-bottom: 10px;
        margin-right: 10px;
        text-align: center;
        .classifylist-book-list-item-img {
          width: 100%;
          height: 150px;

          img {
            width: 100%;
            height: 100%;
            border-radius: 10px;
          }
        }
      }
    }
  }
}
</style>